<template>
	<view>
		<view class="shop-card-sum">
			<image :src="imglink + 'member/shop-card.png'" mode="" class="shop-card-img"></image>
			<view class="shop-card-money">
				¥{{cardList.count}} <text>.00</text>
			</view>
			<view class="shop-card-tip">
				购物卡金额
			</view>
			<view class="shop-card-btn" @click="codePopup">
				去购物
			</view>
		</view>
		<view class="shop-card-content">
			<view class="act_explain-title">
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						我的购物卡
					</view>
				</view>
				<view class="explain_tip">
					<view :class="cardStataIndex==index?'explain_tip-active':''" v-for="(item,index) in cardStata" :key='index' @click="chooseStata(index)">
						{{item}}
					</view>
				</view>
			</view>
			<view style="margin-top: 40upx;" v-if="cardList.list && cardList.list.length!=0">
				<view class="shop-card-details" :class="item.status==4?'normal-use-not':'normal-use'" v-for="(item,index) in cardList.list" :key='index'>
					<view class="shop-card-details-msg">
						<view class="shop-card-details-title">
							<view class="normal-use-time">
								小鱼超市购物卡
							</view>
							<view class="normal-use-time" style="font-size: 24upx;margin-top: 10upx;">
								<text v-if="item.card_number">NO.{{item.card_number}}</text>
							</view>
						</view>
						<view class="shop-card-details-sum">
							<view class="shop-card-details-money">
								<view class="normal-use-time">
									¥{{item.card_amount}}
								</view>
								<view class="">
									面值
								</view>
							</view>
							<view class="shop-card-details-group" v-if="item.status==1">
								拼团订单，成团后才可激活
							</view>
						</view>
					</view>
					<view class="shop-card-details-operate" :class="item.status==4?'normal-use-not-box':'normal-use-box'">
						<view class="shop-card-time normal-use-time">
							<text v-if="item.card_validity_time && item.status>2">有效期至:{{item.card_validity_time}}</text>
						</view>
						<view class="shop-card-details-btn" v-if="item.status==3" @click="cardPopup(item.card_no,item.card_password)">
							购物卡信息
						</view>
						<view class="shop-card-details-btn" v-if="item.status==2" @click="activateCard(item.order_shopping_card_id)">
							激活
						</view>
					</view>
					<image :src="imglink + 'member/past-due.png'" mode="" v-if="item.status==4"></image>
				</view>
			</view>
			<view style="margin-top: 40upx;" v-else>
				<view style="border-top:1px #ccc solid;text-align: center;font-size:32upx;color:#666;padding:36upx 0;">
					暂无数据
				</view>
			</view>
		</view>
		<view class="shop-card-explain">
			<view class="shop-card-use-flow">
				<view class="">
					使用流程：
				</view>
				<view class="" style="font-size: 24upx;">
					1.激活购物卡 -> 2.去绑卡 -> 3.绑卡完成后，进行下单购物；
				</view>
			</view>
			<view class="shop-card-use-flow">
				<view class="">
					说明：
				</view>
				<view class="" style="font-size: 24upx;">
					<view>1、拼团中订单，不可激活购物卡；</view>
					<view>2、激活购物卡虚拟物品，不支持退款；</view>
					<view>3、显示所有获得购物卡金额，具体消费金额，去购物线上超市查看；</view>
					<view>4、购物待激活有效期未1年；</view>
				</view>
			</view>
		</view>
		<uni-popup ref="supermarketCode" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/popup-close.png'" @click="popupSwitch"></image>
				<view class="popup_box_content">
					<view class="popup_box_title">
						长按下方识别小鱼超市二维码，去选购产品
					</view>
					<image :src="imglink + 'xiaoyu.jpg'" mode="aspectFit"></image>
					<view class="popup_box_tip">
						手指长按上面二维码，进入“小鱼超市”
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="supermarketCardInfo" :card_info="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/popup-close.png'" @click="cardPopupSwitch"></image>
				<view class="popup_box_content">
					<view class="popup_box_title">
						购物卡信息
					</view>
					<view style="height:68upx;line-height:68upx;font-size:30upx;color:#FE9543;text-align: center;">
						<view>卡号：{{ card_no }}    密码：{{ card_password }}</view>
					</view>
					<image :src="imglink + 'xiaoyu.jpg'" mode="aspectFit"></image>
					<view class="popup_box_tip">
						手指长按上面二维码，进入“小鱼超市”
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{uniPopup},
		data(){
			return{
				imglink: this.$store.state.imgLink,
				cardStata:['正常','已过期'],
				cardStataIndex:0,
				cardList:[],
				page:1,
				pageSize:2,
				lastPage:'',
				status:'',
				store_id:'',
				card_no:'',
				card_password:'',
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
		},
		onShow() {
			this.gainData()
		},
		methods:{
			popupSwitch(){
				this.$refs.supermarketCode.close()
			},
			codePopup(){
				this.$refs.supermarketCode.open()
			},
			cardPopupSwitch(){
				this.$refs.supermarketCardInfo.close()
			},
			cardPopup(card_no,card_password){
				this.card_no = card_no
				this.card_password = card_password
				this.$refs.supermarketCardInfo.open()
			},
			chooseStata(index){
				this.cardStataIndex = index
				this.gainData()
			},
			activateCard(card_id){
				let data = {
					token:this.$store.getters.getToken,
					order_shopping_card_id:card_id
				}
				this.$api.activate_shopping_card(data).then(res => {
					console.log(res)
					
					// if(res.status){
						
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:8000
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					// }
					
				}).catch(err => {
					console.log(err)
				})
			},
			gainData(){
				switch(this.cardStataIndex){
					case 0:
						this.status = ''
						break;
					case 1:
						this.status = 2
						break
				}
				let data = {
					token:this.$store.getters.getToken,
					status:this.status
				}
				this.$api.gain_shopping_data(data).then(res => {
					console.log(res)
					if(res.status){
						this.cardList = res
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.popup_box_tip{
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title{
		text-align: center;
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_de{
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close{
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content{
		width: 100%;
		height: 682upx;
		background: #FFFFFF;
		position: absolute;
		top: 72upx;left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 50upx 62upx;
		box-sizing: border-box;
	}
	.popup_box_content>image{
		width: 388upx;
		height: 386upx;
		margin: 36upx auto 18upx;
		margin-left: 40upx;
	}
	page{
		background: #F5F5F5;
	}
	.shop-card-sum{
		width: 100%;
		height: 422upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		position: relative;
		padding-top: 72upx;
		box-sizing: border-box;
	}
	.shop-card-img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;left: 0;
	}
	.shop-card-money{
		color: #FFFFFF;
		font-size: 80upx;
		text-align: center;
	}
	.shop-card-money>text{
		font-size: 28upx;
	}
	.shop-card-tip{
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 12upx;
		text-align: center;
	}
	.shop-card-btn{
		width: 240upx;
		height: 60upx;
		line-height: 60upx;
		border: 2upx solid #FFFFFF;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		bottom: 100upx;left: 50%;
		transform: translate(-50%,0);
	}
	.shop-card-content{
		width: 100%;
		padding: 40upx 30upx 10upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: -36upx;
		border-radius: 24upx 24upx 0 0;
		position: relative;
		/* z-index: 888; */
	}
	.act_explain-title{
		display: flex;
		justify-content: space-between;
	}
	.explain-title{
		display: flex;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		vertical-align: middle;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
	}
	.explain_tip{
		width: 240upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		display: flex;
		border-radius: 32upx;
		background: #F2F2F2;
		font-size: 24upx;
	}
	.explain_tip>view{
		width: 50%;
		color: #666666;
		border-radius: 32upx;
	}
	.explain_tip>.explain_tip-active{
		color: #FFFFFF;
		background: linear-gradient(to right,#FE9543,#FF664F);
	}
	.shop-card-details{
		width: 100%;
		height: 260upx;
		border-radius: 12upx;
		margin-bottom: 20upx;
		padding-top: 52upx;
		box-sizing: border-box;
		position: relative;
	}
	.normal-use{
		background: linear-gradient(#FFE2A5,#FCDEA1,#FFE7B7,#F7D89A,#FFDF9B);
	}
	.normal-use-not{
		background: #F2F2F3;
	}
	.shop-card-details-msg{
		display: flex;
		padding: 0 50upx;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.shop-card-details-title{
		margin-top: 14upx;
	}
	.shop-card-details-title>view{
		font-size: 34upx;
	}
	.shop-card-details-sum{
		text-align: center;
	}
	.shop-card-details-money{
		position: relative;
	}
	.shop-card-details-money>view:first-child{
		font-size: 60upx;
	}
	.shop-card-details-money>view>text{
		font-size: 28upx;
	}
	.shop-card-details-money>view:last-child{
		width: 60upx;
		height: 30upx;
		line-height: 30upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 20upx;
		border-radius: 15upx 17upx 17upx 0;
		background: #371503;
		position: absolute;
		top: -6upx;right: -28upx;
	}
	.shop-card-details-operate{
		width: 100%;
		height: 84upx;
		padding: 0 50upx;
		box-sizing: border-box;
		border-radius: 0 0 12upx 12upx;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
	}
	.normal-use-box{
		background: #FFECC7;
	}
	.normal-use-not-box{
		background: rgba(0,0,0,0.05);
	}
	.shop-card-time{
		font-size: 24upx;
		line-height: 84upx;
	}
	.normal-use-time{
		color: #924810;
	}
	.normal-use-not-time{
		color: #666666;
	}
	.shop-card-details-btn{
		width: 172upx;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 26upx;
		border-radius: 22upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		margin-top: 20upx;
	}
	.shop-card-details-group{
		color: #F76E40;
		font-size: 22upx;
	}
	.shop-card-explain{
		margin-top: 40upx;
		padding: 0 30upx;
		box-sizing: border-box;
		padding-bottom: 30upx;
	}
	.shop-card-use-flow{
		margin-bottom: 30upx;
	}
	.shop-card-use-flow>view{
		color: #616161;
		font-size: 26upx;
	}
	.shop-card-use-flow>view:first-child{
		margin-bottom: 20upx;
	}
	.normal-use-not>image{
		width: 136upx;
		height: 120upx;
		position: absolute;
		bottom: 40upx;right: 40upx;
	}
</style>
